<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入jquery -->
<script type="text/javascript"
	th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript"
	th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
</head>

<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>


	<script type="text/javascript">
		var chartDom = document.getElementById('container');
		var myChart = echarts.init(chartDom);
		var option;

		var data = [];
		for (let i = 0; i < 10; ++i) {
		    data.push(Math.round(Math.random() * 200));
		}

		option = {
		    xAxis: {
		        max: 'dataMax',
		    },
		    yAxis: {
		        type: 'category',
		        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
		        inverse: true,
		        animationDuration: 300,
		        animationDurationUpdate: 300,
		        max: 7 // only the largest 3 bars will be displayed
		    },
		    series: [{
		        realtimeSort: true,
		        name: 'X',
		        type: 'bar',
		        data: data,
		        label: {
		            show: true,
		            position: 'right',
		            valueAnimation: true
		        }
		    }],
		    legend: {
		        show: true
		    },
		    animationDuration: 0,
		    animationDurationUpdate: 3000,
		    animationEasing: 'linear',
		    animationEasingUpdate: 'linear'
		};

		function run () {
		    var data = option.series[0].data;
		    for (var i = 0; i < data.length; ++i) {
		    	
		    	console.log(data[i]);
		    	if( data[i]>10000){
		    		 data[i]=10;
		    	}
		    	let rands=Math.random();
		        if (rands > 0.9) {
		            data[i] += Math.round(Math.random() * 2000);
		        }
		        else  if (rands > 0.7){
		            data[i] += Math.round(Math.random() * 1500);
		        }
		        else  if (rands > 0.5){
		            data[i] += Math.round(Math.random() * 1000);
		        }
		        else  if (rands > 0.3){
		            data[i] += Math.round(Math.random() * 500);
		        }
		        else{
		            data[i] += Math.round(Math.random() * 25000);
		        }
		    }
		    myChart.setOption(option);
		}

		setTimeout(function() {
		    run();
		}, 0);
		setInterval(function () {
		    run();
		}, 3000);

		option && myChart.setOption(option);
	</script>
</body>
</html>